<template>
  <div>
    <van-search
  show-action
  label="北京"
  placeholder="找明星、演出、场馆"
>
  <template #action>
    <div @click="onClickButton">搜索</div>
  </template>
</van-search>
    <div class="bigtop">
      <div class="topbox">
        <yanchu v-for="item in icodata" :key="item.id" :item="item"></yanchu>
      </div>
    </div>
    <div class="today">
      <div class="daytop">
        <div class="daleft">
          <img src="https://obj.pipi.cn/festatic/common/media/1641437249993-today-look.png" alt="">
        </div>
        <div class="daright">
          <!-- <p>更多</p>
          <p><van-icon name="arrow" /></p> -->
        </div>
      </div>
      <div class="daydown">
        <biqiang></biqiang>
      </div>
    </div>
    <div class="qitian">
      <div class="qitop">
        
      </div>
      <div class="qibottom">
        <qitian></qitian>
      </div>
    </div>

    <div class="zhoumo">
      <zhoumo></zhoumo>
    </div>
    <div class="pinpai">
      <pinpaiguan></pinpaiguan>
    </div>
    <div class="daka">
      <daka></daka>
    </div>
    <div class="tuijian">
      <weinituijian></weinituijian>
    </div>
    <div class="tunluyou">
      <router-link to=" ">主页</router-link>
      <router-link to="dingdan">订单</router-link>
    </div>
    <router-view></router-view>
  </div>
</template>

<script setup>
import axios from "@/api/thataxios.js";
import { ref } from "vue";
import yanchu from "@/components/yanchu.vue";
import biqiang from "@/components/biqiang.vue";
import qitian from "@/components/qitian.vue";
import daka from "@/components/daka.vue";
import zhoumo from "@/components/zhoumo.vue";
import pinpaiguan from "@/components/pinpaiguan.vue";
import weinituijian from "@/components/weinituijian.vue";

let icodata = [
  {
    id: 1,
    name: "话剧音乐剧",
    url: "https://img.meituan.net/kylisean/251b917b350e4501f74c806b7a84d33c6442.png@180w_180h_1c_1e",
    dataurl:
      "https://show.maoyan.com/maoyansh/myshow/ajax/performances/4;st=0;p=1;s=20;tft=0;marketLevel=0?needRank=true&labelId=0&sellChannel=13&cityId=1&lng=0&lat=0",
  },
  {
    id: 2,
    name: "脱口秀",
    url: "https://img.meituan.net/kylisean/df3b2047e7b119b30fa9e5aeeaa86c2c5389.png@180w_180h_1c_1e",
    dataurl:
      "https://show.maoyan.com/maoyansh/myshow/ajax/performances/15;st=0;p=1;s=20;tft=0;marketLevel=0?needRank=true&labelId=0&sellChannel=13&cityId=1&lng=0&lat=0",
  },
  {
    id: 3,
    name: "休闲展览",
    url: "https://img.meituan.net/kylisean/6c948edf52e230eb8437af37f554d72e5852.png@180w_180h_1c_1e",
    dataurl:
      "https://show.maoyan.com/maoyansh/myshow/ajax/performances/9;st=0;p=1;s=20;tft=0;marketLevel=0?needRank=true&labelId=0&sellChannel=13&cityId=1&lng=0&lat=0",
  },
  {
    id: 4,
    name: "沉浸剧场",
    url: "https://img.meituan.net/kylisean/8e70698f3ee2229f434aff6c81c9ba0b5159.png@180w_180h_1c_1e",
    dataurl:
      "https://show.maoyan.com/maoyansh/myshow/ajax/performances/14;st=0;p=1;s=20;tft=0;marketLevel=0?needRank=true&labelId=4,5&sellChannel=13&cityId=1&lng=0&lat=0",
  },
  {
    id: 5,
    name: "演唱会",
    url: "https://img.meituan.net/kylisean/af59e1c098cca69c7b09fdecb872cda34380.png@180w_180h_1c_1e",
    dataurl:
      "https://show.maoyan.com/maoyansh/myshow/ajax/performances/1;st=0;p=1;s=20;tft=0;marketLevel=0?needRank=true&labelId=0&sellChannel=13&cityId=1&lng=0&lat=0",
  },
  {
    id: 6,
    name: "亲子艺术",
    url: "https://img.meituan.net/kylisean/6d1af5d881e43c937214188f73c776915585.png@180w_180h_1c_1e",
    dataurl:
      "https://show.maoyan.com/maoyansh/myshow/ajax/performances/7;st=0;p=1;s=20;tft=0;marketLevel=0?needRank=true&labelId=0&sellChannel=13&cityId=1&lng=0&lat=0",
  },
  {
    id: 7,
    name: "音乐会",
    url: "https://img.meituan.net/kylisean/8680a46c5592da991874fbf5be80bd6e6105.png@180w_180h_1c_1e",
    dataurl:
      "https://show.maoyan.com/maoyansh/myshow/ajax/performances/6;st=0;p=1;s=20;tft=0;marketLevel=0?needRank=true&labelId=0&sellChannel=13&cityId=1&lng=0&lat=0",
  },
  {
    id: 8,
    name: "相声",
    url: "https://img.meituan.net/kylisean/144dff87ac9a7192ba20f31a8f25ec9025610.png@180w_180h_1c_1e",
    dataurl:
      "https://show.maoyan.com/maoyansh/myshow/ajax/performances/16;st=0;p=1;s=20;tft=0;marketLevel=0?needRank=true&labelId=0&sellChannel=13&cityId=1&lng=0&lat=0",
  },
  {
    id: 9,
    name: "舞蹈芭蕾",
    url: "https://img.meituan.net/kylisean/bfa0903aeeabd5f7c181704e83b7813f5812.png@180w_180h_1c_1e",
    dataurl:
      "https://show.maoyan.com/maoyansh/myshow/ajax/performances/5;st=0;p=1;s=20;tft=0;marketLevel=0?needRank=true&labelId=0&sellChannel=13&cityId=1&lng=0&lat=0",
  },
  {
    id: 10,
    name: "音乐节",
    url: "https://img.meituan.net/kylisean/6b6618b02fd4e661620d46ae7ca14eb54919.png@180w_180h_1c_1e",
    dataurl:
      "https://show.maoyan.com/maoyansh/myshow/ajax/performances/10;st=0;p=1;s=20;tft=0;marketLevel=0?needRank=true&labelId=0&sellChannel=13&cityId=1&lng=0&lat=0",
  },
  {
    id: 11,
    name: "戏曲艺术",
    url: "https://img.meituan.net/kylisean/fb4ed0cef0da4cbdd69b51bfd387bd7c15619.png@180w_180h_1c_1e",
    dataurl:
      "https://show.maoyan.com/maoyansh/myshow/ajax/performances/3;st=0;p=1;s=20;tft=0;marketLevel=0?needRank=true&labelId=0&sellChannel=13&cityId=1&lng=0&lat=0",
  },
  {
    id: 12,
    name: "竞技赛事",
    url: "https://img.meituan.net/kylisean/e43306e1130cce7c1a70e5647ea1ee4715782.png@180w_180h_1c_1e",
    dataurl:
      "https://show.maoyan.com/maoyansh/myshow/ajax/performances/12;st=0;p=1;s=20;tft=0;marketLevel=0?needRank=true&labelId=0&sellChannel=13&cityId=1&lng=0&lat=0",
  },
  {
    id: 13,
    name: "剧本杀",
    url: "https://img.meituan.net/kylisean/a78c2c6d63eace9ffa5dcf876b1115bb4776.png@180w_180h_1c_1e",
    dataurl:
      "https://show.maoyan.com/maoyansh/myshow/ajax/performances/13;st=0;p=1;s=20;tft=0;marketLevel=0?needRank=true&labelId=0&sellChannel=13&cityId=1&lng=0&lat=0",
  },
  {
    id: 14,
    name: "其他",
    url: "https://img.meituan.net/kylisean/22f3c50037036a59ef23d19c96dbbd6f5549.png@180w_180h_1c_1e",
    dataurl:
      "https://show.maoyan.com/maoyansh/myshow/ajax/performances/8;st=0;p=1;s=20;tft=0;marketLevel=0?needRank=true&labelId=0&sellChannel=13&cityId=1&lng=0&lat=0",
  },
];


const getDetail = () => axios.get("maoyansh/myshow/ajax/performances/rob/main?uuid=oyes3a1isxuu9456lwbi3810xlq3flnqe4nqc2946ir09podm1q6s5b271zvkoo9&clientType=1&os=1&sellChannel=13&cityId=1&lng=0&lat=0", {
});
const detail = ref([]);

async function update() {
  const { data } = await getDetail();
  detail.value = data;
  console.log("detail", detail);
  return detail;
}
update();

</script>

<style lang="scss" scoped>

.tunluyou{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99;
    width: 100vw;
    background-color: #fff;
    display: flex;
    justify-content: space-around;
    a{
      color: gray;
    }
  }

.bigtop::-webkit-scrollbar {
  display: none;
}
.bigtop {
  overflow: auto;
  .topbox {
    height: 75rem;
    display: flex;
  }
}
.today{
  margin-top: 10rem;
  .daytop{
    margin-bottom: 10rem;
    margin-left: 15rem;
    display: flex;
    justify-content: space-between;
    line-height: 24rem;
    .daleft{
      width: 90rem;
      height: 24rem;
    }
    .daright{
      display: flex;
      margin-right: 15rem;
    }
  }
  .daydown::-webkit-scrollbar {
    display: none;
  }
  .daydown{
    overflow: auto;
    ul{
        display: flex;
      }
  }
}
.qitian{
  margin-top: 20rem;
  .qibottom::-webkit-scrollbar {
  display: none;
}
  .qibottom{
    overflow: auto;
  }
}
.daka::-webkit-scrollbar {
  display: none;
}
.daka{
  height: 140rem;
  background-color: #f8f8f8;
  overflow: auto;
}
.zhoumo::-webkit-scrollbar {
  display: none;
}
.zhoumo{
  padding: 20rem 0 100rem;
  overflow: auto;
  background-image: linear-gradient( pink , #999);
}
.pinpai::-webkit-scrollbar {
  display: none;
}
.pinpai{
  background-color: #99999970;
  overflow: auto;
}
</style>